.detail-page {
  flex: 1;
  padding-bottom: 180rpx;
  box-sizing: border-box;
  overflow-y: auto;
  scroll-behavior: smooth;
  .banner {
    width: 100%;
    height: 750rpx;
    position: relative;
    .fangda{
      position: absolute;
      z-index: 1000;
      right: 60rpx;
      bottom: 80rpx;
      width: 55rpx;
      height: 55rpx;
    }
    .swiper {
      width: 100%;
      height: 100%;
    }
    .swiper-item {
      width: 100%;
      height: 100%;
      background: #fff;
      image {
        width: 100%;
        height: 100%;
        clip-path: ellipse(120% 750rpx at top);
      }
    }
  }

  .detail-info {
    padding: 36rpx 39rpx;
    background: #fff;
    .price {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 34rpx;
      .price-item {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24rpx;
        color: #979797;
        .price-num {
          font-size: 38rpx;
          color: var(--main-color);
          margin-top: -4rpx;
        }
      }
      .price-item-1 {
        color: var(--main-color);
        margin-right: 20rpx;
      }
      .line {
        margin: 0 15rpx;
      }
    }
    .operation {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .operation-item {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24rpx;
        color: #545454;
        .code {
          font-size: 32rpx;
          color: #545454;
          margin-left: 10rpx;
        }
      }
      .opt {
        display: flex;
        align-items: center;
        justify-content: center;
        .opt-item {
          display: flex;
          align-items: center;
          margin-left: 40rpx;
          font-size: 24rpx;
          color: #979797;
          image {
            width: 30rpx;
            height: 30rpx;
            margin-right: 10rpx;
          }
        }
      }
    }
  }

  .detail-desc {
    padding: 36rpx 39rpx;
    background: #fff;
    margin-top: 10rpx;
    .title {
      font-size: 30rpx;
      color: #545454;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .right {
        font-size: 22rpx;
        color: #545454;
        display: flex;
        font-weight: 400;
        align-items: center;
        .icon {
          margin-left: 30rpx;
          font-size: 34rpx;
        }
      }
    }
    .content {
      font-size: 23rpx;
      color: #545454;
      margin-top: 14rpx;
      .parameter {
        font-size: 26rpx;
        color: #545454;
        margin-top: 30rpx;
      }
    }
  }
}
.detail-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  box-sizing: border-box;
  padding: 18rpx 39rpx;
  width: 100%;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
  padding-bottom: calc(env(safe-area-inset-bottom) + 18rpx);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  .icons {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    font-size: 22rpx;
    color: #545454;
    text-align: center;
    line-height: 28rpx;
    .home {
      margin-right: 50rpx;
    }
    .cart {
      position: relative;
      .dot {
        position: absolute;
        top: -10rpx;
        right: -5rpx;
        width: 30rpx;
        height: 30rpx;
        font-size: 20rpx;
        color: #fff;
        background: var(--main-color);
        border-radius: 50%;
      }
    }
    image {
      width: 36rpx;
      height: 36rpx;
    }
  }

  .buy {
    width: 200rpx;
    height: 76rpx;
    background: var(--main-color);
    color: #fff;
    font-size: 28rpx;
    border-radius: 2rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .add-cart {
    background: transparent;
    color: var(--main-color);
    border: 2rpx solid var(--main-color);
    margin-right: 12rpx;
  }
}

.add-cart-popup {
  height: 600rpx;
  background: #fff;
  border-top-left-radius: 30rpx;
  border-top-right-radius: 30rpx;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  &-content {
    flex: 1;
    box-sizing: border-box;
    padding: 40rpx 34rpx;
    position: relative;
    .close {
      position: absolute;
      top: 35rpx;
      right: 30rpx;
      width: 40rpx;
      height: 40rpx;
      image {
        width: 26rpx;
        height: 26rpx;
      }
    }
    .header {
      display: flex;
      align-items: flex-end;
      .price-item {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        color: #545454;
        .price-num {
          font-size: 38rpx;
          font-weight: bold;
          margin-top: -4rpx;
        }
      }
      .image {
        width: 204rpx;
        height: 204rpx;
        border-radius: 9rpx;
        margin-right: 20rpx;
        overflow: hidden;
        image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .operation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 50rpx;
    color: #545454;
    &-title {
      font-size: 30rpx;
      font-weight: bold;
    }
    .opt {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      height: 70rpx;
      view {
        width: 70rpx;
        height: 70rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 30rpx;
      }
      .input {
        background: #f5f5f5;
        border-radius: 2rpx;
        width: 120rpx;
        height: 70rpx;
        box-sizing: border-box;
        text-align: center;
        font-size: 30rpx;
        font-weight: bold;
      }
    }
  }
  &-footer {
    height: auto;
    width: 100%;
    padding: 34rpx;
    padding-bottom: calc(env(safe-area-inset-bottom) + 34rpx);
    box-sizing: border-box;
    background: #e7e7e7;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
